import React, { useState,useRef ,useEffect,useCallback} from 'react'
import reactLogo from '../../../assets/1.png'
import './lfr-App.css'
import { useNavigate } from 'react-router-dom'
import { LeftOutline, TextOutline ,FireFill ,StarFill,CompassOutline ,CameraOutline ,FaceRecognitionOutline  } from 'antd-mobile-icons'
import { CalendarPicker , Button} from 'antd-mobile';
import dayjs from 'dayjs';
import axios from 'axios'

const defaultRange = [
  dayjs().toDate(),
  dayjs().add(2, 'day').toDate(),
];

export default function List() {
  const [val, setVal] = useState(() => [
    dayjs().subtract(2, 'day').toDate(),
    dayjs().add(2, 'day').toDate(),
]);
  const navigate = useNavigate()
  const [xx, setxx] = useState(['酒店', '月租房', '民宿'])
  const [xid,setxid]=useState(0)
  const [visible2, setVisible2] = useState(false);
  const [da,setda]=useState('2024-10-31')
  const [db,setdb]=useState('2024-11-6')
  const [si,setsi]=useState('热门推荐')
  const [list, setlist] = useState([])
  const timeDiff = new Date(db)-new Date(da)
  const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  const nights = daysDiff;
  const refs=useRef()
  const [Height, setHeight] = useState(null);


  const getlist = () => {
    axios.get('http://127.0.0.1:3000/lfr_index/hote').then(res => {
      console.log(res.data);
      setlist(res.data)
    })
  }

  const tz=(ids)=>{
    navigate(`/detail`,{state:{id:ids,da:da,db:db,nights:nights}})
    
  }
  
  useEffect(() => {
    getlist()
    const handleScroll = () => {
      const pageHeight = document.documentElement.clientHeight; 
      const scrollPosition = window.scrollY;
      console.log('Page height:', pageHeight);
      console.log('Scroll position:', scrollPosition);
      setHeight(scrollPosition)
  };

  window.addEventListener('scroll', handleScroll);

  return () => {
      window.removeEventListener('scroll', handleScroll);
  };
  }, [ ])
 
  return (
    <div className='div'>
      <img src={reactLogo} className='img' onClick={() => { navigate('/sea') }}></img>
      <div className='div1'>
        <p>< LeftOutline /></p>
        <p onClick={()=>{
          navigate('/indent')
        }}><TextOutline />订单</p>
      </div>
      <div className='div2'>
        <div className='xp'>
          {
            xx.map((item, index) => {
              return <p key={index} className={index==xid?'p1':''} onClick={()=>{setxid(index)}} >{item}</p>
            })
          }
        </div>
        <div className='div3'>
          <p className='p1'>城市<br></br><input type='text'></input></p>
          <p className='p2'>地址<br></br><input type='text'></input></p>
        </div>
        <div className='div4'>
          <p className='p1'>今天入住<br></br><input type='text' value={da} onClick={() => {
            setVisible2(true);
        }} onChange={(event)=>{setda(event.target.value)}}></input></p>.
          <p className='pp'>{nights}晚</p>
          <p className='p2'>明天离店<br></br><input type='text' value={db} onClick={() => {
            setVisible2(true);
        }} onChange={(event)=>{setdb(event.target.value)}}></input></p>
        
        </div>
        <div>
         <input  type='text' className='a' placeholder='试试搜：酒店/地名'></input>
        </div>
        <Button block color='primary' size='large' onClick={()=>{
          navigate('/search',{state:{da:da,db:db,nights:nights}})
        }}>
          查找酒店
        </Button>
        <CalendarPicker visible={visible2} defaultValue={defaultRange} selectionMode='range'  onClose={() => setVisible2(false)} onMaskClick={() => setVisible2(false)}  onConfirm={(val)=>{
          console.log(val);
             setda(dayjs(val[0]).format('YYYY-MM-DD'))
            setdb(dayjs(val[1]).format('YYYY-MM-DD'))
            
        }}/>
        
      </div>
      <div className='div5'>
          <div className='di1'>
               <ul onClick={()=>{setsi('热门推荐')}}>
                  <li><FireFill className={si=='热门推荐'?'li6':'li1'} /></li>
                  <li className={si=='热门推荐'?'li':''}>热门推荐</li>
               </ul>
               <ul onClick={()=>{setsi('本地推荐')}}>
                  <li><StarFill  className={si=='本地推荐'?'li6':'li2'}/></li>
                  <li className={si=='本地推荐'?'li':''}>本地推荐</li>
               </ul>
               <ul onClick={()=>{setsi('优选新店')}}>
                  <li><CompassOutline  className={si=='优选新店'?'li6':'li3'}/></li>
                  <li className={si=='优选新店'?'li':''}>优选新店</li>
               </ul>
               <ul onClick={()=>{setsi('网红酒店')}}>
                  <li><CameraOutline className={si=='网红酒店'?'li6':'li4'} /></li>
                  <li  className={si=='网红酒店'?'li':''}>网红酒店</li>
               </ul>
               <ul onClick={()=>{setsi('海滨度假')}}>
                  <li><FaceRecognitionOutline className={si=='海滨度假'?'li6':'li5'} /></li>
                  <li className={si=='海滨度假'?'li':''}>海滨度假</li>
               </ul>
          </div>
          <div className='d2' ref={refs}>
          {
            list.filter(items=>items.type==si).map(item=>{
              return <div className='di2' key={item._id} onClick={()=>{
                tz(item._id)
              }}>
                <img src={item.img}></img>
                <p>{item.name}</p>
                <ul>
                  <li>{item.address}</li>
                  <li className='li'>￥{item.price}<span>起</span></li>
                </ul>
              </div>
            })
          }
          </div>
      </div>
      <div className={Height>0?'da2':'s'}>
          <ul className='ul'>
            <li className='p1'>< LeftOutline className='p' /></li>
            <li> <input className='input' onClick={()=>{
              navigate('/search')
            }}></input></li>
            <li onClick={()=>{
          navigate('/indent')
        }}><TextOutline className='p' /><br></br><p>订单</p></li>
          </ul>
          <div className='di1'>
               <ul onClick={()=>{setsi('热门推荐')}}>
                  <li><FireFill className={si=='热门推荐'?'li6':'li1'} /></li>
                  <li className={si=='热门推荐'?'li':''}>热门推荐</li>
               </ul>
               <ul onClick={()=>{setsi('本地推荐')}}>
                  <li><StarFill  className={si=='本地推荐'?'li6':'li2'}/></li>
                  <li className={si=='本地推荐'?'li':''}>本地推荐</li>
               </ul>
               <ul onClick={()=>{setsi('优选新店')}}>
                  <li><CompassOutline  className={si=='优选新店'?'li6':'li3'}/></li>
                  <li className={si=='优选新店'?'li':''}>优选新店</li>
               </ul>
               <ul onClick={()=>{setsi('网红酒店')}}>
                  <li><CameraOutline className={si=='网红酒店'?'li6':'li4'} /></li>
                  <li  className={si=='网红酒店'?'li':''}>网红酒店</li>
               </ul>
               <ul onClick={()=>{setsi('海滨度假')}}>
                  <li><FaceRecognitionOutline className={si=='海滨度假'?'li6':'li5'} /></li>
                  <li className={si=='海滨度假'?'li':''}>海滨度假</li>
               </ul>
          </div>
          <p></p>
      </div>
    </div>
  )
}
